<template>
  <div>
    <div class="title">
      <p><span>当前状态:</span><span class="state" :class="{normal :this.viewForm.operateState === 100,process:this.viewForm.operateState === 2,empty:this.viewForm.operateState === 1 || this.viewForm.operateState === 101}">{{$dictUtils.getDictLabel("weightOperateState", this.viewForm.operateState, "")}}</span></p>
    </div>
      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :disabled="formReadOnly"
               label-width="120px">
        <table class="detail-table" cellspacing="0" cellpadding="0">
          <tr>
            <td class="table-title">修改时间</td>
            <td class="table-content">{{this.viewForm.createDate}}</td>
            <td class="table-title">修改人</td>
            <td class="table-content"><span v-if="viewForm.createBy !== undefined">{{this.viewForm.createBy.loginName}}</span></td>
<!--            <td class="table-title">状态：</td>-->
<!--            <td class="table-content">-->
<!--              {{$dictUtils.getDictLabel("weightOperateState", this.viewForm.operateState, "")}}-->
<!--            </td>-->
          </tr>
          <tr>
            <td class="table-title">修改前</td>
            <td class="table-content">
              <p v-if="this.showOldTransCode">派车单号：{{this.showOldTransCode}}</p>
              <p v-if="this.showOldPlanCode">发运计划：{{this.showOldPlanCode}}</p>
              <p v-if="this.showOldTruckNumber">车牌号：{{this.showOldTruckNumber}}</p>
              <p v-if="this.showOldDriverName">司机姓名：{{this.showOldDriverName}}</p>
              <p v-if="this.showOldDeductWeight">暗扣：{{this.showOldDeductWeight}}</p>
              <p v-if="this.showOldDeductWeightWater">扣水：{{this.showOldDeductWeightWater}}</p>
              <p v-if="this.showOldDeductWeightImpurity">扣杂：{{this.showOldDeductWeightImpurity}}</p>
              <p v-if="this.showOldOverloadAdjustWeight">超载调整：{{this.showOldOverloadAdjustWeight}}</p>
              <p v-if="this.showOldOriginalWeight">原发数：{{this.showOldOriginalWeight}}</p>
              <p v-if="this.showOldAllowLossWeight">合理路耗：{{this.showOldAllowLossWeight}}</p>
            </td>
            <td class="table-title">修改后</td>
            <td class="table-content">
              <p v-if="this.showNewTransCode">派车单号：{{this.showNewTransCode}}</p>
              <p v-if="this.showNewPlanCode">发运计划：{{this.showNewPlanCode}}</p>
              <p v-if="this.showNewTruckNumber">车牌号：{{this.showNewTruckNumber}}</p>
              <p v-if="this.showNewDriverName">司机姓名：{{this.showNewDriverName}}</p>
              <p v-if="this.showNewDeductWeight">暗扣：{{this.showNewDeductWeight}}</p>
              <p v-if="this.showNewDeductWeightWater">扣水：{{this.showNewDeductWeightWater}}</p>
              <p v-if="this.showNewDeductWeightImpurity">扣杂：{{this.showNewDeductWeightImpurity}}</p>
              <p v-if="this.showNewOverloadAdjustWeight">超载调整：{{this.showNewOverloadAdjustWeight}}</p>
              <p v-if="this.showNewOriginalWeight">原发数：{{this.showNewOriginalWeight}}</p>
              <p v-if="this.showNewAllowLossWeight">合理路耗：{{this.showNewAllowLossWeight}}</p>
            </td>
          </tr>
        </table>
      </el-form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        loading: false,
        showOldTransCode: '',
        showOldPlanCode: '',
        showOldTruckNumber: '',
        showOldDriverName: '',
        showOldDeductWeight: '',
        showOldDeductWeightWater: '',
        showOldDeductWeightImpurity: '',
        showOldOverloadAdjustWeight: '',
        showOldOriginalWeight: '',
        showOldAllowLossWeight: '',
        showNewTransCode: '',
        showNewPlanCode: '',
        showNewTruckNumber: '',
        showNewDriverName: '',
        showNewDeductWeight: '',
        showNewDeductWeightWater: '',
        showNewDeductWeightImpurity: '',
        showNewOverloadAdjustWeight: '',
        showNewOriginalWeight: '',
        showNewAllowLossWeight: '',
        inputForm: {
          id: '',
          businessProductId: '',
          procInsId: '',
          businessId: '',
          productId: '',
          payMode: 0,
          selectVos: [],
          companyName: '',
          price: '',
          productName: '',
          contractCode: '',
          effectTime: '',
          newPrice: ''
        },
        operateOld: {},
        operateNew: {},
        viewForm: {}
      }
    },
    props: {
      businessId: {
        type: String,
        default: ''
      },
      formReadOnly: {
        type: Boolean,
        default: false
      }
    },
    components: {
    },
    watch: {
      // 例如：当前为调价审批表单，对应的是销售调价业务，表是：t_business_product
      // 这里的business就指的是t_business_product的一个主键ID
      'businessId': {
        handler (newVal) {
          if (this.businessId) {
            this.init(this.businessId)
          } else {
            this.$nextTick(() => {
              this.$refs.inputForm.resetFields()
            })
          }
        },
        immediate: true,
        deep: false
      }
    },
    methods: {
      // 根据主键ID从接口获取详情数据
      init (id) {
        if (id) {
          this.loading = true
          this.inputForm.id = id
          this.$nextTick(() => {
            // this.$refs.inputForm.resetFields()
              this.showOldTransCode = ''
              this.showOldPlanCode = ''
              this.showOldTruckNumber = ''
              this.showOldDriverName = ''
              this.showOldDeductWeight = ''
              this.showOldDeductWeightWater = ''
              this.showOldDeductWeightImpurity = ''
              this.showOldOverloadAdjustWeight = ''
              this.showOldOriginalWeight = ''
              this.showOldAllowLossWeight = ''
              this.showNewTransCode = ''
              this.showNewPlanCode = ''
              this.showNewTruckNumber = ''
              this.showNewDriverName = ''
              this.showNewDeductWeight = ''
              this.showNewDeductWeightWater = ''
              this.showNewDeductWeightImpurity = ''
              this.showNewOverloadAdjustWeight = ''
              this.showNewOriginalWeight = ''
              this.showNewAllowLossWeight = ''
            this.$http({
              url: `/weight/exceptionQuery/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.viewForm = data.result
              this.inputForm = this.recover(this.inputForm, data.result)
              this.operateOld = JSON.parse(this.viewForm.operateOld)
              if (this.operateOld.deductWeight) {
                this.showOldDeductWeight = this.operateOld.deductWeight
              }
              if (this.operateOld.deductWeightWater) {
                this.showOldDeductWeightWater = this.operateOld.deductWeightWater
              }
              if (this.operateOld.deductWeightImpurity) {
                this.showOldDeductWeightImpurity = this.operateOld.deductWeightImpurity
              }
              if (this.operateOld.overloadAdjustWeight) {
                this.showOldOverloadAdjustWeight = this.operateOld.overloadAdjustWeight
              }
              if (this.operateOld.originalWeight) {
                this.showOldOriginalWeight = this.operateOld.originalWeight
              }
              if (this.operateOld.allowLossWeight) {
                this.showOldAllowLossWeight = this.operateOld.allowLossWeight
              }
              if (this.operateOld.planCode) {
                this.showOldPlanCode = this.operateOld.planCode
              }
              if (this.operateOld.transCode) {
                this.showOldTransCode = this.operateOld.transCode
              }
              if (this.operateOld.driverName) {
                this.showOldDriverName = this.operateOld.driverName
              }
              if (this.operateOld.truckNumber) {
                this.showOldTruckNumber = this.operateOld.truckNumber
              }
              this.operateNew = JSON.parse(this.viewForm.operateNew)
              if (this.operateNew.deductWeight) {
                this.showNewDeductWeight = this.operateNew.deductWeight
              }
              if (this.operateNew.deductWeightWater) {
                this.showNewDeductWeightWater = this.operateNew.deductWeightWater
              }
              if (this.operateNew.deductWeightImpurity) {
                this.showNewDeductWeightImpurity = this.operateNew.deductWeightImpurity
              }
              if (this.operateNew.overloadAdjustWeight) {
                this.showNewOverloadAdjustWeight = this.operateNew.overloadAdjustWeight
              }
              if (this.operateNew.originalWeight) {
                this.showNewOriginalWeight = this.operateNew.originalWeight
              }
              if (this.operateNew.allowLossWeight) {
                this.showNewAllowLossWeight = this.operateNew.allowLossWeight
              }
              if (this.operateNew.planCode) {
                this.showNewPlanCode = this.operateNew.planCode
              }
              if (this.operateNew.transCode) {
                this.showNewTransCode = this.operateNew.transCode
              }
              if (this.operateNew.driverName) {
                this.showNewDriverName = this.operateNew.driverName
              }
              if (this.operateNew.truckNumber) {
                this.showNewTruckNumber = this.operateNew.truckNumber
              }
              this.loading = false
            })
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/assets/scss/config.scss';
  .title{
    margin-top: 5px;
    span:last-child{
      margin-left: 10px;
      font-size: 16px;
    }
  }
  ::v-deep.el-form{
    margin-top: 10px !important;
  }
  .detail-table{
    border: 1px solid #DDDDDD;
    border-bottom: none;
    td{
      padding: 12px 10px;
      border-right: 1px solid #DDDDDD;
      border-bottom: 1px solid #DDDDDD;
    }
    .table-title{
      width: 125px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .table-content{
      width: 260px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      p{
        line-height: 22px;
      }
      span:first-child{
        margin-right: 20px;
      }
    }
  }
</style>
